<template>
	<view>
		<view class="top-bar">
			<search-bar></search-bar>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item tab-font-style" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
					Tab{{index}}
				</view>
			</scroll-view>
		</view>
		
		<view>
			<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.imgUrl" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<view class="product-item-panel">
			<view class="hot-recommend-title">热卖推荐</view>
			<view class="product-container">
				<product-card class="product-item" v-for="(productItem,index) in productList" :key="index" :productInfo="productItem"></product-card>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import globalConfig from "@/config/globalConfig.js"
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {uniSwiperDot},
		data() {
			return {
				info: [{
						imgUrl: '//img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					},
					{
						imgUrl: '//img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
					},
					{
						imgUrl: '//img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
					}
				],
				current: 0,
				autoplay: true,
				interval: 3000,
				mode: 'long',
				dotsStyles: {
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				TabCur: 0,
				scrollLeft: 0,
				cmsUrl: globalConfig.api_url + '/cms/home/index',
				productList: []
			}
		},
		onLoad() {
			this.getCmsInfo()
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			
			getCmsInfo() {
				var that = this
				uni.request({
					url: this.cmsUrl,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res)
						that.info = res.data.data.advertiseImg.bigImgList
						that.productList = res.data.data.productList
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.top-bar {
		position: sticky;
		top: 0;
		z-index: 99;
	}
	
	.swiper-box {
		height: 400upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.tab-font-style {
		font-weight: 400;
	}
	
	.hot-recommend-title {
		padding: 15upx 20upx;
		font-size: 30upx;
		font-weight: 500;
		color: #8799A3;
	}
	
	.product-item-panel {
		width: 100%;
		/* background-color: #E5E5E5; */
	}
	
	.product-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.product-item {
		width: 46%;
		margin-bottom: 25upx;
	}
</style>
